<template>
  <h2>测试八 ，toRefs()对象外部引入</h2>
  <p>
<!--    这里不用写teacher 测试时发现访问不到，看文档发现返回的属性 -->
    {{ name }}--{{ age }}:{{ job.salary }}
    <span v-show="teacher.car">{{ teacher.car}}</span>
  </p>
  <button @click="name+='!'">改名</button>
  <button @click="age ++">过生日</button>
  <button @click="job.salary+=1000">涨工资</button>
  <button @click="addCar">买车</button>
  <br>
  <button @click="show">显示原始数据</button>
</template>

<script>
import Teacher from "../entity/Teacher";
import {toRefs,readonly,shallowReadonly,toRaw,markRaw} from "vue";

export default {
  name: "TeacherTest2",
  setup() {
    let teacher = Teacher('yangtao', 34, 20000)
    function show(){
      console.log(`显示原始数据`,toRaw(teacher))
    }
    // 保护重要数据时，可以使用readonly函数把对象变成只读对象。
    // teacher=readonly(teacher)
    // 只保护当前属性，对象属性可以自由操作。下面内容，只能操作工资，不能修改直接属性。
    // teacher=shallowReadonly(teacher)
    //追加属性
    function addCar(){
      // 标记为原始数据，这个car就不再是响应式内容了
      teacher.car=markRaw( {
        name:"宝马",
        price:"30w"
      })
    }
    return {
      ...toRefs(teacher),show,teacher,addCar
    }
  }
}
</script>